<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Merry-Christmas</title>
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/jquery.fullPage.min.css" />
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="css/home.css" />
    <link rel="stylesheet" href="./css/tree2.css" />
    <link rel="stylesheet" href="./css//typewriter.css" />
    <link rel="stylesheet" href="./css/photoAlbum.css" />
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/jquery.fullPage.min.js"></script>
    <script src="./js/snow.js"></script>
    <script>
      function audioAutoPlay() {
        var audio = document.getElementById("audio");
        audio.play();
      }
      document.addEventListener("touchstart", function () {
        audioAutoPlay();
      });
    </script>
  </head>
  <body>
    <div id="fullpage">
      <div class="section page_one">
        <div class="treeDiv">
          <ul class="bgg">
            <li class="sphere"></li>
            <p class="text">宝贝媳妇儿~圣诞快乐</p>
          </ul>
          <ul class="tree">
            <li class="top-star"></li>
            <li class="top">
              <ul class="tree-pts">
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
              </ul>
            </li>
            <li class="middle first">
              <ul class="tree-pts">
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
              </ul>
            </li>
            <li class="middle second">
              <ul class="tree-pts">
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
              </ul>
            </li>
            <li class="middle third">
              <ul class="tree-pts">
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
              </ul>
            </li>
            <li class="bottom outer">
              <ul class="tree-pts">
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts left"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
                <li class="pts right"></li>
              </ul>
            </li>
            <li class="stem">
              <ul class="tree-stem">
                <li class="stem"></li>
                <li class="gift g1"></li>
                <li class="gift g2"></li>
                <li class="gift g3"></li>
                <li class="gift g4"></li>
                <li class="gift g5"></li>
                <li class="gift g6"></li>
                <li class="gift g7"></li>
                <li class="gift g8"></li>
                <li class="gift g9"></li>
                <li class="shadow"></li>
              </ul>
            </li>
          </ul>
          <ul class="toys">
            <li class="star"></li>
            <li class="ball b1"></li>
            <li class="ball b2"></li>
            <li class="ball b3"></li>
            <li class="ball b4"></li>
            <li class="ball b5"></li>
            <li class="ball b6"></li>
            <li class="ball b7"></li>
            <li class="ball b8"></li>
            <li class="ball b9"></li>
            <li class="ball b10"></li>
            <li class="ball b11"></li>
            <li class="ball b12"></li>
            <li class="ball b13"></li>
            <li class="ball b14"></li>
            <li class="ball b15"></li>
            <li class="ball b16"></li>
            <li class="ball b17"></li>
            <li class="ball b18"></li>
            <li class="ball b19"></li>
            <li class="ball b20"></li>
            <li class="light l1"></li>
            <li class="light l2"></li>
            <li class="light l3"></li>
            <li class="light l4"></li>
            <li class="light l5"></li>
            <li class="light l6"></li>
            <li class="light l7"></li>
            <li class="light l8"></li>
            <li class="light l9"></li>
            <li class="light l10"></li>
            <li class="light l11"></li>
            <li class="light l12"></li>
            <li class="light l13"></li>
            <li class="light l14"></li>
            <li class="light l15"></li>
            <li class="light l16"></li>
            <li class="light l17"></li>
            <li class="light l18"></li>
            <li class="light l19"></li>
            <li class="light l20"></li>
            <li class="light l21"></li>
            <li class="light l22"></li>
            <li class="light l23"></li>
            <li class="light l24"></li>
            <li class="light l25"></li>
          </ul>
        </div>
      </div>
      <div class="section page_two">
        <div class="content" id="contents"></div>
      </div>
      <div class="section page_three">
        <div class="barrage" id="barrages"></div>
      </div>
      <div class="section page_four">
        <div id="photoAlbum">
          <img src="./img//meinv//1.jpg" />
          <img src="./img//meinv//2.jpg" />
          <img src="./img//meinv//3.jpg" />
          <img src="./img//meinv//4.jpg" />
          <img src="./img//meinv//5.jpg" />
          <img src="./img//meinv//6.jpg" />
          <img src="./img//meinv//7.jpg" />
          <img src="./img//meinv//8.jpg" />
          <img src="./img//meinv//9.jpg" />
          <img src="./img//meinv//10.jpg" />
          <img src="./img//meinv//11.jpg" />
          <img src="./img//meinv//12.jpg" />
          <img src="./img//meinv//13.jpg" />
          <img src="./img//meinv//14.jpg" />
          <img src="./img//meinv//15.jpg" />
          <img src="./img//meinv//16.jpg" />
          <img src="./img//meinv//17.jpg" />
          <img src="./img//meinv//18.jpg" />
          <img src="./img//meinv//19.jpg" />
          <img src="./img//meinv//20.jpg" />
          <img src="./img//meinv//21.jpg" />
          <img src="./img//meinv//22.jpg" />
          <img src="./img//meinv//23.jpg" />
          <img src="./img//meinv//24.jpg" />
          <img src="./img//meinv//25.jpg" />
          <img src="./img//meinv//26.jpg" />
          <img src="./img//meinv//16.jpg" />
          <img src="./img//meinv//4.jpg" />
          <img src="./img//meinv//5.jpg" />
          <img src="./img//meinv//6.jpg" />
        </div>
        <div id="btn">点击查看效果</div>
      </div>
    </div>
    <div class="imageGif"></div>
    <audio id="audio" loop>
      <source src="./audio/audio.mp3" type="audio/mpeg" />
    </audio>
  </body>
  <script src="./js/typewriter.js" defer></script>
</html>
